<template>
	<view >
		<u-navbar
		:autoBack="true" bgColor="#fff"
		leftIconColor='#000'
		:titleStyle="{ color: '#000'}"
		 title="结算单详情" rightText='' :border="false" :placeholder="true">
			<!-- <view slot="left"></view> -->
			<!-- <view slot="right" style="display: flex;">
				<u-icon name="clock" color="#fff" size="16" style="margin: 0 5px;"></u-icon>
				<u-icon name="plus-circle" color="#fff" size="16"></u-icon>
			</view> -->
		</u-navbar>
		
		<view class="m20 p20 b-rd b-s">
			<view class="fb b-b pb20">结算订单信息</view>
			<view class="f-s-b pt20">
				<span class="c9 f28">结算订单编号</span>
				<span class="fb f28">{{info.orderNo}}</span>
			</view>
			<view class="f-s-b pt20">
				<span class="c9 f28">预约订单ID</span>
				<span class="fb f28">{{info.appointOrderId}}</span>
			</view>
			<view class="f-s-b pt20">
				<span class="c9 f28">结算总重量</span>
				<span class="fb f28">{{info.weightTal | fixNum}}kg</span>
			</view>
			
			<view class="f-s-b pt20">
				<span class="c9 f28">订单状态</span>
				<span class="fb f28">{{info.status | statusType}}</span>
			</view>
			
			
			<view class="f-s-b pt20">
				<span class="c9 f28">创建时间</span>
				<span class="fb f28">{{info.createTime}}</span>
			</view>
			<view class="f-s-b pt20">
				<span class="c9 f28">结算总金额</span>
				<span class="fb f28"><span class="cr fb ">￥{{info.amountTal || 0 | fixNum}}</span> </span>
			</view>
			<view class="f-s-b pt20">
				<span class="c9 f28">结算方式</span>
				<span class="fb f28">{{info.payType | payTypeTxt}}</span>
			</view>
			<!-- <view class="f-s-b pt20">
				<span class="c9 f28"></span>
				<span class="c9 f28">实际付款： <span class="cr fb f36">￥{{info.expectAmountTal || 0}}</span>  </span>
			</view> -->
			
		</view>
		<view class="m20 p20 b-rd b-s f-s-b " v-for="it,ix in info.hsUserWasteVoList">
				<image :src="it.imgUrl ?it.imgUrl: 'https://qnhs.oss-cn-shanghai.aliyuncs.com/2025/08/01/default.jpeg' " style="width:140rpx ;" mode="widthFix"></image>
			    <view class="f-c" style="height: 144rpx;width:144rpx;">
			    	<u-album singleSize='70' :urls="[it.imgUrl]" ></u-album>
			    	
			    </view>
				<view class="f-f-c f1 ml20">
			    	<span >{{it.categorizeName}}</span>
					<span class="c9 f28 mt10">{{it.weight| fixNum}}kg X{{it.price| fixNum}}元/kg</span>
					<span class="cr fb mt10">￥ {{it.amount}}</span>
			    </view>
		</view>
		<view class="f-s-b" v-if="info.status == 0" >
			<view class="sureBtn4" @click="confirm(1)">确认结算</view>
			<view class="sureBtn5" @click="confirm(2)">取消结算</view>
		</view>
		<view class="f-s-b" v-if="info.status == 3">
			<view class="sureBtn4" @click="confirm(4)">确认支付</view>
			<view class="sureBtn5" @click="confirm(5)">支付失败</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo:{
					name:'菜狗一号',
					sex:'男',
					birth:'2000.10.10',
					address:'安徽省 合肥市 庐阳区',
				},
				addressData:null,
				info:"",
				id:'',//结算订单ID
				appointOrderId:'',//预约订单ID
			}
		},
		onShow() {
			// uni.hideBackButton()
		},
		onLoad(option) {
			let that = this
			if(option.id){
				that.appointOrderId = option.id
				that.getDetail(option.id)
				// this.getDetailB(option.id)
			}
		},
		methods: {

			getDetail(id){
				let that = this
				this.$api.request('get', `settlementOrder/app/getSettleOrderBy/${id}`).then(res => {
				 console.log(res.data,'res.data')
				 that.info = res.data
				 that.id = that.info.id
				 // that.list1 = [res.data.imgUrl]
				}).catch(err => {
				  that.$api.msg('请求失败，请稍后再试')
				})
			},
			confirm(status) {
				const that = this
				let text = ''
				if(status == 1) text = '您确定确认结算'
				else if(status == 2) text = '您确定取消结算？'
				else if(status == 4) text = '您确定支付成功？'
				else if(status == 5) text = '您确定支付失败？'
				
				uni.showModal({
					title: '确认？',
					content: text,
					success : (e) => {
						if (e.confirm) {
							that.dealFn(that.id,status)
						}
					}
				})
			},
			dealFn(id,status){
				let that = this
				this.$api.request('get', `appOrder/app/dealSettleOrderById`,{
					id,status,
				}).then(res => {
					that.$api.msg('操作成功')
					that.getDetail(that.appointOrderId)
				 //    setTimeout(()=>{
					// 	uni.navigateBack({
					// 		delta:1
					// 	})
					// },500)
				}).catch(err => {
				  
				})
			}
			
		}
	}
</script>

<style lang="scss">
	page {
		background: $page-color-base;
		// padding-top: 16upx;
		display: flex;
		flex-direction: column;
		::v-deep  .uni-page-head-btn  {
			background-color: #000 !important;
		}
	}
    .headBg{
		background-image: url('https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/homebg.png');
		background-size: 100% 100%;
		// width: 750rpx;
		height: 378rpx;
		// background: #1AC388;
		border-radius: 0rpx 0rpx 40rpx 40rpx;
		opacity: 1;
	}
	.outBtn{
		position: fixed;
		bottom: 200rpx;
		left: 50%;
		transform: translate(-50%,0);
		width: 700rpx;
		height: 88rpx;
		background: #F14647;
		box-shadow: 0rpx 2rpx 4rpx 2rpx rgba(0,0,0,0.16);
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		opacity: 1;
		text-align: center;
		line-height: 88rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #FFFFFF;
	}
	.mainBox{
		margin-top: -200rpx;
		// width: 750rpx;
		height: 792rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 8rpx 2rpx rgba(0,0,0,0.1);
		border-radius: 40rpx 40rpx 8rpx 8rpx;
		opacity: 1;
		padding: 10rpx 32rpx 0;
	}
	.fixsure{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		height: 156rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -4rpx 8rpx 2rpx rgba(0,0,0,0.1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		opacity: 1;
	}
	.btnsure{
		width: 318rpx;
		height: 90rpx;
		background: var(--theme);
		border-radius: 46rpx 46rpx 46rpx 46rpx;
		text-align: center;
		line-height: 90rpx;
		color: #FFFFFF;
	}
	
</style>
